import { reactive } from 'vue'
import { events } from './events'
export function useBlockdrag(data, focusData, lastSelectBlock) {
    // 记录选中后的元素位置
    let dragState = {
        startX: 0,
        startY: 0,
        dragging: false, // 默认没有拖拽
    }

    let markLine = reactive({
        x: null,
        y: null
    })

    let y = null
    let x = null

    // 鼠标移动
    const mousemove = (e) => {
        let { clientX: moveX, clientY: moveY } = e || window.event

        if (!dragState.dragging) {
            dragState.dragging = true
            events.emit("start")
        }
        // 计算出当前元素的最新的top和left, 然后去线数组lineData里面找对应的值，然后显示辅助线
        // 移动后的距离 - 移动前的距离 + 原有的距离
        let left = moveX - dragState.startX + dragState.startLeft

        let top = moveY - dragState.startY + dragState.startTop


        // 显示横坐标
        for (let i = 0; i < dragState.lineList.y.length; i++) {
            y = null
            // 如果最新元素的距离 参照物还有5像素就显示辅助线
            const { showTop: fixedShowTop, top: fixedTop } = dragState.lineList.y[i]
            if (Math.abs(fixedTop - top) < 5) {
                // 辅助线要显示的位置
                y = fixedShowTop
                moveY = dragState.startY - dragState.startTop + fixedTop
                break
            }
        }

        // 显示纵坐标
        for (let i = 0; i < dragState.lineList.x.length; i++) {
            x = null
            // 如果最新元素的距离 参照物还有5像素就显示辅助线
            const { showLeft: fixedShowLeft, left: fixedLeft } = dragState.lineList.x[i]
            if (Math.abs(fixedLeft - left) < 5) {
                // 辅助线要显示的位置
                x = fixedShowLeft
                moveX = dragState.startX - dragState.startLeft + fixedLeft
                break
            }
        }

        markLine.x = x
        markLine.y = y

        // 移动的距离
        const durX = moveX - dragState.startX
        const durY = moveY - dragState.startY
        focusData.value.focused.forEach((block, idx) => {
            let left = dragState.dragPostion[idx].left + durX
            let top = dragState.dragPostion[idx].top + durY
            // 判断边界值
            if (left < 0) left = 0
            if (top < 0) top = 0
            if ((left + block.width) <= data.value.container.width) block.left = left
            if ((top + block.height) <= data.value.container.height) block.top = top
        })
    }

    // 松开鼠标移除事件
    const mouseup = () => {
        document.removeEventListener('mousemove', mousemove)
        document.removeEventListener('mouseup', mouseup)
        markLine.x = null
        markLine.y = null
        if (dragState.dragging) {
            events.emit("end")
        }
    }

    // 3、移动目标中的元素 选中后记录当前的位置和每一个元素所在的位置
    const containerMousemove = (event) => {
        const { width: BWidth, height: BHeight } = lastSelectBlock.value
        const e = event || window.event
        dragState = {
            startX: e.clientX, // 鼠标与浏览器左边的距离
            startY: e.clientY, // 鼠标与浏览器顶部的距离
            startTop: lastSelectBlock.value.top, // 最后一个被选中元素与浏览器顶部的距离
            startLeft: lastSelectBlock.value.left, // 最后一个被选中元素与浏览器左边的距离
            dragPostion: focusData.value.focused.map(({ top, left }) => ({ top, left })),
            dragging: false,
            lineList: (() => {
                let lineData = { x: [], y: [] }
                let focusDataList = [...focusData.value.unFocused, { top: 0, left: 0, width: data.value.container.width, height: data.value.container.height }]
                focusDataList.forEach((item) => {
                    const { top: ATop, left: ALeft, width: AWidth, height: AHeight } = item
                    // A顶对B顶
                    lineData.y.push({ showTop: ATop, top: ATop })

                    // A顶对B底 
                    lineData.y.push({ showTop: ATop, top: ATop - BHeight })

                    // A中对B中
                    lineData.y.push({ showTop: ATop + AHeight / 2, top: ATop + AHeight / 2 - BHeight / 2 })

                    // A底对B顶
                    lineData.y.push({ showTop: ATop + AHeight, top: ATop + AHeight })

                    // A底对B底
                    lineData.y.push({ showTop: ATop + AHeight, top: ATop + AHeight - BHeight })

                    // A左对B左0
                    lineData.x.push({ showLeft: ALeft, left: ALeft })

                    // A右对B左0
                    lineData.x.push({ showLeft: ALeft + AWidth, left: ALeft + AWidth })

                    // A中对B中0
                    lineData.x.push({ showLeft: ALeft + AWidth / 2, left: ALeft + AWidth / 2 - BWidth / 2 })

                    // A右对B右
                    lineData.x.push({ showLeft: ALeft + AWidth, left: ALeft + AWidth - BWidth })

                    // A左对B右0
                    lineData.x.push({ showLeft: ALeft, left: ALeft - BWidth })

                })
                return lineData;
            })()
        }
        document.addEventListener('mousemove', mousemove)
        document.addEventListener('mouseup', mouseup)
    }

    return {
        containerMousemove,
        markLine
    }
}